import React,{useState,useEffect} from "react";
import "./allocation.css"
import { Card,Form,Switch,Input,Button } from "antd";
import axios from "axios";

export default function Allocation(){
    //设置倒计时
    const [seconds,setSeconds] = useState(15);
    //倒计时自动显示答案
    const [checkType,setCheckType] = useState(false);
    //获取输入的时间值
    const changeTime = (e)=>{
        setSeconds(e.target.value)
        // console.log(e)
    }
    //自动获取答案状态改变
    const changeSwitch = (e)=>{
        setCheckType(e)
    }
    //保存
    const save = ()=>{
        let params = {
            inter:seconds,
            show:checkType
        }
        // console.log(params,'111')
        axios.post('/api/sett/data',params).then(()=>{
            getData()
        })
    }
    //获取配置数据
    const getData = ()=>{
        axios.get('/api/gett/data').then((res)=>{
            // console.log(res,'111');
            setSeconds(res.data.data[0].inter);
            setCheckType(res.data.data[0].show)
        })
    }
    useEffect(()=>{
        getData()
    },[])
    return (
        <div className="config">
            <Card title="全局配置" style={{width:'800px',height:'280px',margin:'80px auto'}}>
                <Form>
                    <div className="center">
                    <Form.Item label="倒计时设置(秒)"
                        rules={{
                            required:true,
                            message:'请输入倒计时时间~'
                        }}>
                        <Input value={seconds} onChange={changeTime}></Input>
                    </Form.Item>
                    <Form.Item name="switch" label="倒计时自动显示答案" valuePropName="checked">
                        <Switch 
                            checked={checkType}
                            onChange={changeSwitch}
                            checkedChildren="开" 
                            unCheckedChildren="关"
                        />
                    </Form.Item>
                    </div>
                    <br></br>
                    <div className="config-btn">
                        <Button type="primary" onClick={save}>保存</Button>
                    </div>
                </Form>
            </Card>
        </div>
    )
}